<template>
  <div>
    <h2>客服管理</h2>
    <div class="operatingBox">
      <div class="operating">
        <el-button
          type="success"
          icon="el-icon-plus"
          size="small"
          @click="addCustomer"
          >新增</el-button
        >
      </div>
      <div class="operating">
        <el-input
          placeholder="请输入内容"
          v-model="searchContent"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="searchTitle"
          ></el-button>
        </el-input>
      </div>
    </div>
    <div class="formTable">
      <template>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column prop="type" label="类型" width="90">
            <template slot-scope="scope">
              {{
                scope.row.type == 0 ? "售后" : scope.row.type == 1 ? "投诉" : ""
              }}
            </template>
          </el-table-column>
          <el-table-column prop="number" label="客服编号" width="140">
          </el-table-column>
          <el-table-column prop="title" label="标题" width="170">
          </el-table-column>
          <el-table-column prop="patientName" label="客户" width="70">
          </el-table-column>
          <el-table-column prop="mode" label="服务方式" width="100">
            <template slot-scope="scope">
              {{
                scope.row.mode == 0
                  ? "电话"
                  : scope.row.mode == 1
                  ? "传真"
                  : scope.row.mode == 2
                  ? "邮寄"
                  : scope.row.mode == 3
                  ? "上门"
                  : scope.row.mode == 4
                  ? "其他"
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column prop="source" label="来源" width="80">
          </el-table-column>
          <el-table-column prop="date" label="服务日期" width="220">
          </el-table-column>
          <el-table-column prop="creator" label="创建人" width="120">
          </el-table-column>
          <el-table-column prop="status" label="状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag
                disable-transitions
                type="danger"
                v-if="scope.row.status == 0"
                >新客服</el-tag
              >
              <el-tag
                disable-transitions
                type="warning"
                v-if="scope.row.status == 1"
                >处理中</el-tag
              >
              <el-tag
                disable-transitions
                type="success"
                v-if="scope.row.status == 2"
                >已处理</el-tag
              >
              <el-tag
                disable-transitions
                type="info"
                v-if="scope.row.status == 3"
                >已取消</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            prop="operation"
            label="操作"
            width="200"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit-outline"
                size="mini"
                @click="changeCustomer(scope.row)"
                :disabled="scope.row.status==2"
                >修改</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-close"
                size="mini"
                @click="deleteCustomer(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <!-- 分页器 -->
    <Pagination
      :total="total"
      :pageSize="pageSize"
      @getPagination="getPagination"
    ></Pagination>
  </div>
</template>

<script>
import { cusInfo, delCusInfo, searchInfo } from "@/api/customer";
import Pagination from "@/components/Pagination";
export default {
  name: "cusManage",
  components: {
    Pagination,
  },
  data() {
    return {
      searchContent: "",
      tableData: [
        {
          content: "", //服务内容
          createTime: "",
          creator: "", //创建者
          date: "", //服务日期
          description: "",
          feedback: "", //服务反馈
          mode: "", //服务方式
          number: "", //客服编号
          patientName: "", //客户
          source: "", //来源
          status: "", //状态
          title: "",
          type: "",
          updateTime: "",
          id: 0,
        },
      ],
      total: 0,
      currentPage: 1,
      pageSize: 10,
    };
  },
  created() {
    //获取列表信息---------------------------
    this.getCusInfo(this.currentPage, this.pageSize);
  },
  methods: {
    //查找接口----------------------------
    async searchInformation(currentPage, pageSize, title) {
      let res = await searchInfo({ currentPage, pageSize, title });
      console.log("查找接口----------", res.data.data);
      if (res.data.code === 200) {
        this.tableData = res.data.data.list;
        //页码
        this.total= res.data.data.total;
        this.pageSize= res.data.data.pageSize;
      }
    },
    //查找--------------------------------
    searchTitle() {
      // console.log(this.searchContent);
      this.searchInformation(
        this.currentPage,
        this.pageSize,
        this.searchContent
      );
    },
    //获取列表信息接口---------------------------
    async getCusInfo(currentPage, pageSize) {
      let res = await cusInfo({ currentPage, pageSize });
      // console.log("获取列表信息接口--------", res.data);
      if (res.data.code === 200) {
        // console.log("获取客户管理列表信息接口--------", res.data.data.list);
        this.tableData = res.data.data.list;
        // console.log(res.data.data.total);
        this.total = res.data.data.total;
        // this.pageSize=res.data.pageSize;
      }
    },
    //新增
    addCustomer() {
      this.$router.push("/customer/addCustomer");
    },
    //分页
    getPagination(page) {
      // console.log("----", page);
      this.currentPage = page;
      this.getCusInfo(this.currentPage, this.pageSize);
    },

    //编辑修改-----------------------------
    changeCustomer(row) {
      // console.log(row.id);
      this.$router.push({
        path: "/customer/changeCus",
        query: {
          type: row.type,
          title: row.title,
          status: row.status,
          number: row.number,
          mode: row.mode,
          source: row.source,
          date: row.date,
          patientName: row.patientName,
          feedback: row.feedback,
          content: row.content,
          id: row.id,
        },
      });
    },
    //删除信息接口---------------------------
    async deleteInfo(id) {
      let res = await delCusInfo(id); //post拼写删除括号
      // console.log("删除信息接口-----", res.data);
      if (res.data.code === 200) {
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        //更新视图-------------------------
        this.getCusInfo(this.currentPage, this.pageSize);
      } else {
        this.$message.error("删除失败");
      }
    },
    //删除----------------------------------------
    deleteCustomer(row) {
      // console.log("删除---------",row.id);
      // this.deleteInfo(row.id)
      this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //执行删除操作------------------------
          this.deleteInfo(row.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang="less" scoped>
h2 {
  padding: 15px;
}
.operatingBox {
  background-color: white;
  margin: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 3px solid #ccc;
  border-radius: 5px;
}
.operating {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px;
}
.el-input {
  width: 200px;
}
.formTable {
  margin-left: 10px;
  margin-right: 10px;
}
.el-button {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  font-weight: 700;
  font-size: 100%;
  padding: 6px;
  border-radius: 0.25em;
}
</style>
